<template>
  <div class="home">
    <transition name="slide">
      <router-view class="Router"></router-view>
    </transition>
    <cube-tab-bar v-model="selectedLabelDefault"
                  :data="tabs"
                  @click="clickHandler"
                  @change="changeHandler">
    </cube-tab-bar>
    <span class="sign">{{Count}}</span>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      selectedLabelDefault: '首页',
      tabs: [{
        label: '首页',
        icon: 'cubeic-home'
      }, {
        label: '分类',
        icon: 'cubeic-tag'
      }, {
        label: '购物车',
        icon: 'cubeic-mall'
      },
      {
        label: '搜索',
        icon: 'cubeic-search'
      }, {
        label: '我的',
        icon: 'cubeic-person'
      }]
    }
  },
  methods: {
    clickHandler (label) {
      // if you clicked home tab, then print 'Home'
      console.log(label)
    },
    changeHandler (label) {
      // if you clicked different tab, this methods can be emitted
      // 点击跳转路由
      switch (label) {
        case '首页':
          this.$router.push({ path: '/footernav/index' })
          break
        case '分类':
          this.$router.push({ path: '/footernav/list' })
          break
        case '购物车':
          this.$router.push({ path: '/footernav/cart' })
          break
        case '搜索':
          this.$router.push({ path: '/footernav/search' })
          break
        case '我的':
          this.$router.push({ path: '/footernav/mine' })
          break
      }
    }
    // setHomeHeight () {
    //   const home = document.querySelector('.home')
    //   console.log(home)
    //   home.style.height = document.documentElement.clientHeight
    //   console.log(document.documentElement.clientHeight)
    // }
  },
  created () {
    switch (this.$route.path) {
      case '/footernav/index':
        this.selectedLabelDefault = '首页'
        break
      case '/footernav/list':
        this.selectedLabelDefault = '分类'
        break
      case '/footernav/search':
        this.selectedLabelDefault = '搜索'
        break
      case '/footernav/cart':
        this.selectedLabelDefault = '购物车'
        break
      case '/footernav/mine':
        this.selectedLabelDefault = '我的'
        break
    }
  },
  mounted () {
    // this.setHomeHeight()
  },
  computed: {
    ...mapGetters({ Count: 'getCount' })
  }
}
</script>
<style lang="scss">
.home {
  overflow: hidden;
  .cube-tab-bar {
    font-size: 20px;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
  }
  .Router {
    position: absolute;
    width: 100%;
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  }
  .slide-enter-active,
  .slide-leave-active {
    transition: all 0.5s linear;
  }
  .slide-enter,
/* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(100%);
    opacity: 0;
  }
  .slide-leave-to {
    transform: translateX(-100%);
    opacity: 0;
  }
  .sign {
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: 35px;
    left: 195px;
    background-color: red;
    border-radius: 50%;
    font-size: 8px;
    color: #fff;
    text-align: center;
  }
}
</style>
